<template>
	<view class="category">
		<view class="info_tips bg_f">
			<view>
				<view class="example-body">
					<uni-steps :options="list1" active-color="#17AAFF" :active="active" />
				</view>
			</view>
		</view>
    <!-- 选择图片 -->
    <view class="upload bg_f">
      <view class="upload_title">
        <view>上传技能图</view>
        <view class="col size">禁止盗用或使用虚假图片</view>
      </view>
      <view class="frame" @click="addImage" v-if="!is_show">
        <view>
          <view class="iconfont icon-24gf-camera2"></view>
          <view>内容真实~内容真实~内容真实~内容真实~内容真实~内容真实~内容真实~内容真实</view>
        </view>
      </view>

      <view class="exhibition" v-if="is_show">
        <view><image :src="imgList[0]" mode="scaleToFill"/></view>
        <view class="choice" @click="addImage">
					<view class="iconfont icon-xiangji1 icont"></view>
				</view>
      </view>

    </view>

		<view class="log-out-btn" @click="information">下一步</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
        is_show: false,
				t_name: '', // 导航栏的标题
				active: 0,
				list1: [{
					title: '技能认证'
				}, {
					title: '填写资料'
				},{
					title: '平台审核'
				}],
			};
		},
		onLoad(opt) {
			this.t_name  = opt.name;
      uni.setNavigationBarTitle({
      　　title:opt.name
      })
		},
		methods:{
      addImage() {
				var _this = this;
				// 从本地相册选择图片或使用相机拍照。
				uni.chooseImage({
					count: 1, //最多可以选择的图片张数，默认9
					//album 从相册选图，camera 使用相机，默认二者都有。
					sourceType: ['album'],
					success: res => {
					//imgList为data中定义的一个数组   保存选择的图片数组（res.tempFilePaths）
						_this.imgList = res.tempFilePaths;
            _this.is_show = true; // 隐藏选择图片
            console.log('选择图片',res)
						// _this.upload(res)
						//获取图片信息。
						// uni.getImageInfo({
						// 	src: res.tempFilePaths[0],
						// 	success: function(image) {
						// 		_this.src = (res.tempFilePaths[0]);
						// 		_this.imgList = res.tempFilePaths
						// 		console.log(_this.src, '获取图片信息'); //打印出图片信息,在浏览器上打开就是你上传的图片
						// 		_this.upload(res)
						// 		//将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data

						// 	}
						// })
					}
				})
			},
			upload(res) {
				const _this = this
				let param  = {
					biz:'temp'
				}
				uni.uploadFile({
					//开发者服务器 url
					url: _this.uploadUrl,
					//获取要上传文件资源的路径。
					filePath: res.tempFilePaths[0],
					fileType:'image',
					//文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					name: 'file',
					formData:param,
					//HTTP 请求 Header, header 中不能设置 Referer。
					header: {
						"Content-Type": "multipart/form-data",  //关键之处，因为uniapp中不支持直接使用 new FormData() 来定义一个formdata数据，通过这样设置就可以向后台传递formdata格式的数据了
						'x-access-token':uni.getStorageSync(ACCESS_TOKEN)//请求头中的token  我们项目中的token名叫‘x-access-token’，根据自己的情况修改
					},
					//成功的回调
					success: uploadFileRes => {
						console.log('上传成功', uploadFileRes)
						//获取图片信息 网站域名 + res.data.message就是一个图片的完整路径了
						var res = JSON.parse(uploadFileRes.data);
						// 这个值就是要返回给后台保存到数据库中的图片地址了
						_this.form.imgUrl= res.message;
					},
					fail:(err)=>{
						console.log('上传失败_______________',err)
					}
				})
			},
			information(){
				if(!this.imgList[0]){
					this.tips('请选择图片');
					// return;
				}
				this.$nav(`/pagesUser/integral/information?name=${this.t_name}&img=${this.imgList[0]}`)
			},
			tips(e){
				uni.showToast({
						title: e,
						icon: 'none',
						duration: 2000
				});
			},

		}
	}
</script>

<style lang="scss">
page{height: 100%;background-color: #F8F8F8;font-size: 26rpx;}
.upload{
  margin-top: 140rpx;
  height: 540rpx;
  .upload_title{
    padding: 8rpx 0;
    >view{
      padding: 5rpx 0;
    }
  }
  .upload_title,.frame,.exhibition{
    width: 710rpx;
    margin: 0 auto;
  }
  .frame{
    height: 400rpx;
    border: 4rpx dashed #EAEAEA;
    text-align: center;
    color: #919191;
    >view{
      padding: 0 50rpx;
      margin-top: 100rpx;
      >view{
        padding: 10rpx 0;
      }
    }
  }
  .exhibition{
    position: relative;
    .choice{
      // width: 100rpx;
      // height: 100rpx;
			background: rgba(0, 0, 0, 0.6);
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			border-radius: 50%;
			.icont{
				padding: 15rpx;
			}
    }
    image{
      height: 400rpx;
      width: 710rpx;
      border-radius: 10rpx;
    }
  }
}

.log-out-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 60rpx auto;
		color: #fff;
		background-color: #1D88FC;
		border-radius: 50rpx;
		box-shadow: 1px 2px 5px rgba(18, 119, 231, 0.4);	
	}

.col{
  color: #919191;
}
.bg_f{
	background-color: #FFF;
}
.size{
  font-size: 22rpx;
}
.icon-24gf-camera2{
  font-size: 30px;
  color: #1E98FF;
}
.icon-xiangji1{
	font-size: 20px;
  color: #FFF;
}
.col_dui{
	color: #18AAFE;
}
.dui_boder{
	// box-shadow: rgba(0, 0, 0, 0.6);
	box-shadow: 10rpx 10rpx 5rpx #888888;
}


.example-body {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 30rpx;
	flex-direction: row;
	.uni-steps__row-title{
		padding: 20rpx 0;
	}
}
</style>
